<template>
	<view>

		<!-- 轮播图 -->
		<view class="top1 ">
			<swiper circular :interval="3000" :current="current" :duration="400" @change="change"
				style="width: 100%;height: 750rpx;">
				<swiper-item v-for="(item ,index) in data.image" :key="index" style="position: fixed;">
					<image :src="item" style="width: 100%;height: 750rpx;z-index: 1;" @click="swiperClick(item)">
					</image>
					<text class="gundongtxt">{{current+1}}/{{data.image.length}}</text>
				</swiper-item>
			</swiper>
		</view>

		<view class=" bg-white  padding-sm">
			<view class="font-34rpx" style="display: flex;  justify-content: space-between;">
				<view>{{data.title}}</view>
				<view>
					<button open-type="share" class="login-btn cu-btn block bg-orange"
						style="font-size: 26rpx;"><uni-icons type="redo-filled" color="#fff" size="20"></uni-icons>
						分享</button>
				</view>
			</view>
			<view class="margin-top-xs ">
				<view style="flex-wrap: wrap;display: flex;">
					<text :class="{'  a1':index%2==0,' a2':index%2==1,'mendianTap margin-bottom-xs font-content':true} "
						v-for="(item,index) in data.tag" :key="index">{{item}}</text>

				</view>
			</view>

			<view class="margin-top-sm"
				style="display: flex;  justify-content: space-between;font-size: 26rpx;color: #999;">
				<view style="width: 500rpx;" @click="gomap">
					<uni-icons type="location" size="16"></uni-icons>
					{{data.addres}}
				</view>
				<view style="width: 200rpx;display: flex;  justify-content: space-between;">
					<view></view>


					<view v-if="location">
						<uni-icons type="location"
							size="16"></uni-icons>{{data.distance>1000?((data.distance/1000).toFixed(1)+"公里"):(data.distance==null?"未知":data.distance+"米")}}
					</view>

				</view>
			</view>
		</view>

		<view class=" bg-white   margin-top-sm padding-sm">
			<view style="display: flex;  justify-content: space-between;" class="">
				<view>日期</view>
				<view style="font-size: 26rpx;color: #999;" @click="call">定制套餐</view>
			</view>
			<view class="margin-top-xs">
				<view>
					<scroll-view class="scroll-view_H " scroll-x="true">
						<view
							:class="{'scroll-view-item_H radius margin-right-sm meixuanzhong':true,'xuanzhong':index==dateListIndex}"
							v-for="(item ,index) in dateList" :key="index" @click="setdateList(index)">
							<view v-if="index<dateList.length" style="" class=" padding-xs juzhong">
								<view>
									<view class="font-13">{{item.date.split("-")[1]+"/"+item.date.split("-")[2]}}</view>
									<view class="font-13">
										<view style="display: flex;display: flex;align-items: flex-end;">
											<view style="color: #e40000;" class="">￥</view>
											<view
												style="color: #e40000;font-size: 30rpx;display: flex;align-items: flex-end"
												class="">
												&nbsp;&nbsp;{{data.miniPrice}}&nbsp;&nbsp;</view>
											<view>起</view>
										</view>
									</view>
								</view>

							</view>

						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<view class="" @click="huiyuanka">
			<uni-notice-bar show-get-more show-icon text="升级会员折扣多多,前往开通会员" />
			<!-- 
			<view style="display: flex;  justify-content: space-between;" >
				<view>升级会员折扣多多</view>
				<view style="font-size: 26rpx;">前往开通会员<uni-icons type="right" size="16" color="#fff"></uni-icons>
				</view>
			</view> -->

		</view>


		<view class=" bg-white  padding-sm ">
			<view class="margin-bottom-xs">场地</view>

			<view style="display: flex;">
				<view v-for="(item,index) in data.cangdiList" :key="index" @click="setcangdiIndex(index)"
					style="border: #d4d4d4 solid 1px; width:200rpx ; "
					:class="{'radius margin-bottom-sm padding-xs margin-right-xs meixuanzhong':true,'xuanzhong':changdiListIndex == index}">

					<view style="width: ;" class="juzhong ">
						{{item.title}}
					</view>
					<view style="flex: 1;" class="juzhong font-12">
						容纳人数:{{item.number}}
					</view>
					<view style="flex: 1;" class="juzhong">
						<view class="font-13">
							<view style="display: flex;display: flex;align-items: flex-end;">
								<view style="color: #e40000;" class="">￥</view>
								<view style="color: #e40000;font-size: 30rpx;display: flex;align-items: flex-end"
									class="">
									&nbsp;&nbsp;{{item.price}}&nbsp;&nbsp;</view>
								<view>人</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class=" bg-white  padding-sm margin-top-sm ">
			<view style="display: flex;">
				<view class="login-btn cu-btn block bg-red2  round " @click="wifi">一键WIFI</view>
				<view class="login-btn cu-btn block bg-red2  round margin-left-sm" @click="call">联系商家</view>
			</view>
		</view>


		<!-- 近期活动 -->
		<view class="  bg-white margin-top-sm  padding-sm ">
			<view class="menu-list  padding-xs">
				<view class="list-cell list-cell-arrow radius">
					<view class="menu-item-box">
						<view>往期活动</view>

					</view>
				</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="scroll-view-item_H margin-right-sm" @click="wangqihuodong(item)"
					v-for="(item ,index) in wangqihuodongList">
					<view style="width: 100rpx;height: 100rpx;display: flex;">
						<image :src="item.imgs.split(',')[0]" class="radius scroll-view-item_H"
							style="width: 100rpx;height: 100rpx;">
						</image>
						<text class="gundongtxt2" style="font-size: 20rpx;">{{item.date}}</text>
					</view>


				</view>
			</scroll-view>
		</view>

		<view class=" bg-white  padding-sm margin-top-sm ">
			<view>图文详情</view>
			<view class="margin-top-xs " v-if="yuanziMarkdownIsOk=='loading'">
				<uni-load-more :status="yuanziMarkdownIsOk"></uni-load-more>
			</view>

			<view class="margin-top-xs" v-if="yuanziMarkdownIsOk!='loading'" v-html="data.yuanziMarkdown">

			</view>
		</view>

		<view style="height: 100px;"></view>

		<view
			style="width: 750rpx;position: fixed;bottom: 0px;display: flex;  justify-content: space-between;border-top: #d5d5d5 solid 1px;"
			class=" padding-sm bg-white">
			<view class="bg-white" @click="show">
				<view class="font-title" style="color: red;">
					清洁费{{data.cangdiList[changdiListIndex].deposit!=null?data.cangdiList[changdiListIndex].deposit:0}}元
					<uni-icons class="margin-left-xs" type="help" size="16"></uni-icons>
				</view>
				<view class="font-content font-12">自行清洁后将原路返还</view>
			</view>
			<view class="juzhong bg-olive radius padding-sm " @click="addCommunication">
				立即预约
			</view>
		</view>

		<uni-popup ref="show">
			<view style="width: 700rpx" class="bg-white radius padding-sm">
				<view class="font-14 font-title margin-bottom-sm">押金说明</view>

				<view class="font-14 font-content margin-bottom-xs margin-left-sm">
					1、当您活动结束后,场地卫生符合商家的标准，您的押金将在商家确认后原路返还
				</view>
				<view class="font-14 font-content margin-bottom-xs margin-left-sm">
					2、当您活动结束后,您未对场地进行清洁。我们将扣除该押金用于清洁场地
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getLocation
	} from '@/utils/map'
	import {
		yuyue,
		payDingjin
	} from "@/api/shop/userorder/ShopUserOrderManagementApi.js"
	import {
		listByDistance10
	} from "@/api/shop/shopconfig/ShopConfigManagementApi.js"
	import {
		getJson
	} from "@/api/system/user.js"

	import {
		generateDateList,
		isNull
	} from '@/utils/validate'
	import {
		getpreviouseventsbyListorgid
	} from '@/api/shop/previousevents/ShopPreviousEventsManagementApi'


	export default {
		data() {
			return {
				wangqihuodongList: [],
				location: null,
				yuanziMarkdownIsOk: "loading",
				dateListIndex: null,
				changdiListIndex: null,
				data: {
					phone: null,
					id: null,
					image: []
				},
				user: null,
				changdiList: [{
						title: "大场地",
						number: 10,
						price: 399,
					},
					{
						title: "小场地",
						number: 5,
						price: 299,
					},
				],
				tag: [],
				title: '',
				current: 0,
				imgList: [],
				dateList: [],
				form: {
					yuanziId: null,
					cangdiTitle: null,
					price: null,
				}
			}
		},
		onLoad(o) {
			this.data.id = o.id;
			this.location = this.$storage.getItem("location")
			this.dateList = generateDateList()
			this.listByDistance10(this.data.id)
			this.getpreviouseventsbyListorgid(o.id)


		},
		onShow() {
			this.getUser()
		},
		methods: {
			/**
			 * 往期活动
			 * @param {Object} data
			 */
			wangqihuodong(data) {
				console.log(data.id);
				uni.navigateTo({
					url: "/pages/common/wangqihuodong/wangqihuodong?id=" + data.id
				})
			},
			async getpreviouseventsbyListorgid(id) {

				console.log(this.data.id);

				let {
					msg,
					data
				} = await getpreviouseventsbyListorgid({
					id: this.data.id
				})
				this.wangqihuodongList = data

			},


			onShareAppMessage(e) {
				let shareobj = {
					title: '人员自助入场', //分享的标题
					path: '/pages/admission/admission?shareId=1', //好友点击分享之后跳转的页面
					//imageUrl: "https://****.com/banner.jpg", //分享的图片  支持PNG及JPG。显示图片长宽比是 5:4。
					imageUrl: 'this.shareImg', //内容图片
				}
				return shareobj //一定要返回对象
			},

			show() {
				this.$refs.show.open()
			},
			onShareAppMessage(res) {
				let id = null
				id = this.data.id
				if (this.data.id.split(',').length == 2) {
					id = this.data.id.split(',')[1]
				}

				let pages = getCurrentPages(); //获取当前页面栈的信息
				let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				return {
					title: this.data.title,
					imageUrl: this.data.image[0], // 自定义分享图标，可选
					path: currentPage.route + `?id=${id}` //后面是路径上要传递的参数
				}
			},

			setcangdiIndex(i) {
				this.changdiListIndex = i
			},
			setdateList(data) {
				this.dateListIndex = data
			},
			addCommunication() {
				console.log(this.user);
				if (isNull(this.user.mobile)) {
					uni.showModal({
						title: '验证手机号',
						content: '您需要先填写手机号,是否前往填写?',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/mine/info/edit"
								})
							} else if (res.cancel) {
								return
								console.log('用户点击取消');
							}
						}
					});

					return
				}

				try {
					if (this.data.cangdiList[this.changdiListIndex].title == null || this.data.cangdiList[this
							.changdiListIndex]
						.price == null) {
						uni.showToast({
							title: "请先选择日期和场地",
							icon: "none"
						})
						return
					}
				} catch (e) {
					uni.showToast({
						title: "请先选择日期和场地",
						icon: "none"
					})
					return
				}
				let _this = this
				_this.form.tenantId2 = _this.data.id
				_this.form.uid = _this.data.id
				_this.form.title = _this.data.cangdiList[_this.changdiListIndex].title
				_this.form.price = _this.data.cangdiList[_this.changdiListIndex].price
				_this.form.number = _this.data.cangdiList[_this.changdiListIndex].number
				_this.form.date = _this.dateList[_this.dateListIndex].date
				_this.form.status = 1
				_this.form.orgIds = _this.data.id
				_this.form.dingjin = this.data.cangdiList[this.changdiListIndex].deposit

				if (_this.form.dingjin != null && _this.form.dingjin > 0) {
					uni.showModal({
						title: '支付押金',
						content: '自行清洁场地后,押金原路返还。确认支付吗?',
						success: function(res) {
							if (res.confirm) {
								_this.payDingjin(_this.form)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.showModal({
						title: '预约确认',
						content: '您确定要预约吗?(可取消)',
						success: function(res) {
							if (res.confirm) {
								_this.form.tenantId2 = _this.data.id
								_this.form.uid = _this.data.id
								_this.form.title = _this.data.cangdiList[_this.changdiListIndex].title
								_this.form.price = _this.data.cangdiList[_this.changdiListIndex].price
								_this.form.number = _this.data.cangdiList[_this.changdiListIndex].number
								_this.form.date = _this.dateList[_this.dateListIndex].date
								_this.form.status = 1
								_this.yuyue(_this.form)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}

			},
			getUser() {
				this.user = this.$store.state.user.user
			},
			async payDingjin(data2) {

				let {
					msg,
					data
				} = await payDingjin(data2)
				uni.requestPayment({
					"provider": "wxpay",
					"appid": data.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					"nonceStr": data.nonceStr, // 随机字符串
					"package": data.packageValue, // 固定值
					"partnerid": 1699149079, // 微信支付商户号
					"prepayid": data.packageValue, // 统一下单订单号
					"timeStamp": data.timeStamp, // 时间戳（单位：秒）
					"signType": data.signType,
					"paySign": data.paySign, // 签名，这里用的 MD5/RSA 签名
					success(res) {
						uni.navigateTo({
							url: "/pages/mine/order/orderRecord/orderRecord?type=1"
						})
					},
					fail(e) {
						console.log(e);
					}
				})
			},
			async yuyue(data2) {

				let {
					msg,
					data
				} = await yuyue(data2)


			},

			async getLocation() {

				let asdf = await getLocation()
				this.location = asdf

				this.$storage.setItem("location", this.location)
			},
			async listByDistance10(id) {


				let q = {
					id: id,
				}
				if (!isNull(this.location)) {
					// await this.getLocation()
					// location = this.$storage.getItem("location")
					q.lat = this.location.latitude
					q.lon = this.location.longitude
				}

				let {
					data
				} = await listByDistance10(q)
				data[0].image = data[0].image.split(",")
				this.data = data[0]

				this.data.cangdiList = JSON.parse(this.data.cangdiList)
				// console.log(JSON.stringify(this.data.cangdiList));
				let ads = 10000
				for (let s of this.data.cangdiList) {
					if (parseFloat(s.price) < ads) {
						ads = parseFloat(s.price)
					}
				}
				this.data.miniPrice = ads



				this.getyuanziMarkdown()
			},
			async getyuanziMarkdown() {
				let {
					data
				} = await getJson(this.data.yuanziMarkdown)
				this.yuanziMarkdownIsOk = "noMore"
				data = data.replace(/<img/g, "<img style='width: 100%;'");

				this.data.yuanziMarkdown = data
			},
			change(e) {
				this.current = e.detail.current
			},
			huiyuanka() {
				uni.showToast({
					icon: "none",
					title: "暂不支持"
				})
				return
				uni.navigateTo({
					url: "/pages/common/vipCard/vipCard"
				})
			},


			gomap(lat, lon, name) {
				let _this = this


				//打开地图，并将门店位置传入
				const latitude = _this.data.logLat.split(",")[1];
				const longitude = _this.data.logLat.split(",")[0];
				uni.openLocation({
					latitude: parseFloat(latitude),
					longitude: parseFloat(longitude),
					address: this.data.addres,
					name: this.data.title,
					success: function() {
						console.log('success');
					}
				});

			},
			call() {

				if (isNull(this.data) ||
					isNull(this.data.phone)) {
					uni.showModal({
						title: "提示",
						content: "商家未正确配置联系方式,请从其他渠道联系商家",
						showCancel: false
					})
					return
				}
				uni.makePhoneCall({
					phoneNumber: this.data.phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function(error) {
						console.log('拨打电话失败', error);
					}
				});

			},

			/**
			 * 连接WiFi
			 */
			wifi() {
				if (isNull(this.data) ||
					isNull(this.data.wifi) ||
					this.data.wifi.split(',').length != 2
				) {
					uni.showModal({
						title: "提示",
						content: "商家未正确配置WiFi,请联系商家",
						showCancel: false
					})
					return
				}

				uni.connectWifi({
					SSID: this.data.wifi.split(',')[0],
					password: this.data.wifi.split(',')[1],
					success: function() {
						uni.showToast({
							icon: "none",
							title: "WIFI连接成功"
						})
					},
					fail: function(error) {
						uni.showModal({
							title: "wifi连接失败",
							content: "如果您在店内连接失败,请联系商家",
							showCancel: false
						})
					}
				});

			},
		}
	}
</script>

<style lang="scss">
	.gundongtxt {
		position: absolute;
		bottom: 10px;
		padding: 4rpx 10rpx;
		color: #fff;
		display: flex;
		font-size: 29rpx;
		z-index: 2;
		left: 340rpx;
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.5);

	}

	.mendianTap {
		margin-top: 5rpx;
		padding: 1px 3px;
		margin-right: 10rpx;
		margin-top: 5rpx;
		font-size: 20rpx;
		border-radius: 5px;


	}

	.a1 {
		color: $uni-color-success-sen;
		background-color: $uni-color-success-dan;
	}

	.a2 {
		color: $uni-color-warning-sen;
		background-color: $uni-color-warning-dan;
	}

	.scroll-view_H {
		white-space: nowrap;

	}

	.scroll-view-item {
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;

		text-align: center;
		font-size: 36rpx;
	}

	.xuanzhong {
		border: 1px solid #ff0000 !important;
		border-radius: 20upx;
		color: #ff0000 !important;
		background-color: #ffe6e7;
	}

	.meixuanzhong {
		// height: 100rpx;
		border: 1px solid #d4d4d4;
		padding: 0px 20rpx;
	}

	.gundongtxt2 {
		position: absolute;

		top: 0px;
		// padding: 4rpx 10rpx;
		color: #fff;
		display: flex;
		font-size: 26rpx;
		z-index: 2;
		width: 100rpx;
		border-radius: 20upx 20upx 0px 0px;
		background: rgba(0, 0, 0, 0.5);
	}
</style>